<template>
  <div>
    <div class="layout bg-color-darkblue">
      <div class="layout-container headline">{{ $t('faq.headline') }}</div>
    </div>
    <div class="layout">
      <div class="layout-container">
        <div class="subtitle">{{ $t('faq.subtitle') }}</div>
        <div class="introduce" style="white-space: pre-line">{{ $t('faq.introduce') }}</div>
        <ul class="faqs">
          <li v-for="(item, index) in 9">
            <div class="question">{{ $t(`faq.faq[${index}].question`) }}</div>
            <div class="answer" v-html="$t(`faq.faq[${index}].answer`)"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "faq"
}
</script>

<style scoped>
.headline {
  height: 140px;
  font-size: 32px;
  color: #FFFFFF;
  line-height: 140px;
}
.subtitle {
  font-weight: 700;
  font-size: 20px;
  color: #333333;
  padding-top: 20px;
}
.introduce {
  /*font-size: 16px;*/
  /*color: #333333;*/
  font-size: 14px;
  color: #666666;
  padding: 20px 0 40px 0;
  white-space: pre-line;
}
ul.faqs {
  columns: 2;
  column-gap: 60px;
  margin-bottom: 60px;
  padding-left: 14px;
}
ul.faqs > li {
  margin-bottom: 4px;
  list-style-image: url("https://intelaulinpro.oss-cn-beijing.aliyuncs.com/list-style-image.png");
  padding-left: 4px;
}
ul.faqs > li > .question {
  font-weight: 200;
  font-size: 16px;
  color: #333333;
  line-height: 30px;
  padding-bottom: 12px;
}
ul.faqs > li > .answer {
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
  padding-bottom: 12px;
  white-space: pre-line;
}
</style>
